<template>
	<div class="transaction-container">
		<!-- 买卖双方信息 -->
		<div class="user-info">
			<div class="info-block seller" style="background-color: palevioletred;">
				<h3>卖家联系方式</h3>
				<p>昵称：{{ tradeInfo.sellerName }}</p>
				<p>手机：{{ tradeInfo.sellerPhone }}</p>
			</div>
			<div class="info-block buyer" style="background-color:aliceblue;">
				<h3>买家联系方式</h3>
				<p>昵称：{{ tradeInfo.buyerName }}</p>
				<p>手机：{{ tradeInfo.buyerPhone }}</p>
			</div>
		</div>

		<!-- 交易信息 -->
		<div class="transaction-info">
			<h3>交易详情</h3>
			<div class="info-item">
				<span>出售数量：</span>
				<span>{{ tradeInfo.tokenAmount }}</span>
			</div>
			<div class="info-item">
				<span>出售价格：</span>
				<span>{{ tradeInfo.curRate }}</span>
			</div>
			<div class="info-item">
				<span>订单时间：</span>
				<span>{{ tradeInfo.createTime }}</span>
			</div>
		</div>

		<!-- 银行信息 -->
		<div class="bank-info" v-if="tradeInfo.sellerBank">
			<h3>收款账户信息</h3>
			<div class="info-item">
				<span>姓名：</span>
				<span>{{ tradeInfo.sellerBank.realName }}<span @click="copyBankInfo" style="color:bisque">复制</span></span>
			</div>
			<div class="info-item">
				<span>开户银行：</span>
				<span>{{ tradeInfo.sellerBank.sellerBank }}<span @click="copyBankInfo" style="color:bisque">复制</span></span>
			</div>
			<div class="info-item">
				<span>银行卡号：</span>
				<span>{{ tradeInfo.sellerBank.bankNo }}<span @click="copyBankInfo" style="color:bisque">复制</span></span>
			</div>
		</div>

		<div class="bank-image">
			<div class="bank-item" v-if="tradeInfo.sellerBank.alipayReceiveImg">
				<div>卖家支付宝</div>
				<image :src="tradeInfo.sellerBank.alipayReceiveImg" class="image"></image>
			</div>
			<div class="bank-item" v-if="tradeInfo.sellerBank.wxReceiveImg">
				<div>卖家微信</div>
				<image :src="tradeInfo.sellerBank.wxReceiveImg" class="image"></image>
			</div>
			<div class="bank-item" v-if="tradeInfo.voucherImg">
				<div>支付凭证</div>
				<image :src="tradeInfo.voucherImg" class="image"></image>
			</div>
		</div>

		<!-- 操作按钮 -->
		<div class="action-buttons">
			<button class="btn cancel" @click="cancelTransaction">取消交易</button>
			<button class="btn cancel" @click="cancelTransaction">申诉</button>
			<button class="btn upload" @click="uploadPayment">
				{{ hasPayment ? '查看支付凭证' : '上传支付凭证' }}
			</button>
		</div>
	</div>
</template>

<script>
import {
  getTradeInfo,
} from '@/api/new.js';
import {
  toLogin
} from '@/libs/login.js';
import {
  mapGetters
} from "vuex";
import {
  setThemeColor
} from '@/utils/setTheme.js'
import {ProductMarketingTypeEnum, ProductTypeEnum} from "../../enums/productEnums";
	export default {
		data() {
			return {
				tradeInfo: {},
        tradeId: 0,
				hasPayment: false
			}
		},
    computed: {
      ...mapGetters(['isLogin', 'uid'])
    },
    onLoad: function(options) {
      if (!options.id) return this.$util.Tips({
        title: '缺少参数'
      }, {
        tab: 3,
        url: 1
      });
      this.$set(this, 'tradeId', options.id);
      this.bgColor = setThemeColor();
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: this.bgColor,
      });
    },
    onShow() {
      if (this.isLogin) {
        this.getTradeInfo();
      } else {
        toLogin();
      }
    },
		methods: {
      getTradeInfo(){
        let that = this;
        uni.showLoading({
          title: "正在加载中"
        });
        getTradeInfo(that.tradeId).then(res => {
          uni.hideLoading();
          let data = res.data;
          console.log(data)
          that.$set(that, 'tradeInfo', data);
        }).catch(err => {
          that.$util.Tips({
            title: err
          }, {
            tab: 4,
            url: '/pages/user/index'
          });
        });
      },
			copyBankInfo() {
				// 实现复制银行信息逻辑
				//const text = `${this.bankInfo.name} ${this.bankInfo.bankName} ${this.bankInfo.cardNumber}`
				//this.$copyText(text)
			},
			cancelTransaction() {
				// 取消交易逻辑
				console.log('取消交易')
			},
			uploadPayment() {
				// 上传支付凭证逻辑
				console.log('上传支付凭证')
			}
		}
	}
</script>

<style scoped>
	.transaction-container {
		max-width: 600px;
		margin: 10px auto;
		padding: 15px;
		background: #f5f5f5;
		border-radius: 8px;
	}

	.user-info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.seller {
		background-color: darkturquoise;
	}

	.buyer {
		background-color: aliceblue;
	}

	.info-block {
		background: white;
		padding: 15px;
		border-radius: 8px;
		width: 48%;
	}

	.transaction-info {
		width: 100%;
		background-color: #fff;
		padding: 15px;
		border-radius: 8px;
	}

	h3 {
		color: #333;
		margin-bottom: 10px;
		font-size: 16px;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		margin: 8px 0;
		color: #666;
	}

	.bank-info,
	.usdt-info {
		background: white;
		padding: 15px;
		border-radius: 8px;
		margin: 15px 0;
	}

	.action-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}

	.btn {
		padding: 10px 20px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
	}

	.cancel {
		background: #ff4444;
		color: white;
	}

	.upload {
		background: #0099ff;
		color: white;
	}

	.bank-image {
		width: 100%;
		border-radius: 8px;
		margin: 15px 0;
		padding-top: 10px;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		background-color: #fff;
	}

	.image {
		width: 100%;
		height: 220px;
		margin-top: 5px;
		border-radius: 8px;
	}

	.bank-item {
		width: calc(50% - 10px);
		margin: 5px;
		div{
			font-size: 16px;
		}
	}

	span[onclick] {
		color: #0099ff;
		cursor: pointer;
		font-size: 12px;
	}
</style>
